<!doctype html>
<!--
	作者：吴忠键
	时间：2018-04-20
	描述：答题页面
-->
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/answer.css" rel="stylesheet" />
	</head>
	<body onload="questionMessage()">
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		
			
		<!--
        	作者：offline
        	时间：2018-04-25
        	描述：头部
        -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" style="color: deepskyblue;">开始答题 祝你好运</h1>
		</header>
		<!--
        	作者：offline
        	时间：2018-04-25
        	描述：身体
        -->
		<div class="answer-question answer-background-color">
			<!--
            	作者：offline
            	时间：2018-04-25
            	描述：放置博士帽图片
            -->
			<div style="width: 100%;height: 60px;" align="center">
				<img src="images/competition.png"/>
			</div>
			<!--
            	作者：offline
            	时间：2018-04-25
            	描述：单项选择的区
            -->
			<h4>&nbsp;&nbsp;<span class="type-of-question">
				<a><span class="mui-icon mui-icon-compose"></span></a>&nbsp;&nbsp;单项选择题</span>
			</h4>
			<!--
            	作者：吴忠键
            	时间：2018-04-24
            	描述：整个题库拼接的html代码放置处
            -->
			<div id="answer-question">
				
				
			</div>
			
			<!--
            	作者：offline
            	时间：2018-04-25
            	描述：提交答案的按钮
            -->
			<div class="submit-answer">
				<ul class="ul-submit-answer">
						<li><button id="submit_button" class="mui-btn mui-btn-success">提交答案</button></li>
				</ul>
			</div>
		</div>
		<!--
        	作者：offline
        	时间：2018-04-25
        	描述：引入自己定义的IP地址
        -->
			<script src="js/ip.js"></script>
		
		
			<!--
            	作者：offline
            	时间：2018-04-25
            	描述：该事件位加载题库事件，放置在加载页面时调用
            -->
			<script>
				/*
				 * 定义全局变量，去获取登录用户的uid和用户通过选择科目和年级后确定的tpid
				 * 传值到这个页面
				 */
				var tpID = 3;
        		var uId = 1;
				
				
				/*
				 * 页面加载试卷题目
				 */
				function questionMessage(){
				var httpUrl = IP+'listQuestion';
				mui.ajax(httpUrl,{
					type:"post",
					dataType:"json",
					contentType : "application/json;charset=UTF-8",
					data : JSON.stringify({
				/*
				 * 这里的tpId 是要根据试卷的学科和年级和第几套试卷来决定调用的题库
				 */
						tpId:tpID
					}),
					success:function(data){
						var question_html = "";
						/*
						 * all 是获取数据总共有多少条，以它减1获得手动排序试卷的最大数值，将该数值隐藏，让在循环多少题时，备用。
						 */
						console.log(data);
						var all = data.length-1;
						for(var k=0;k<data.length;k++){
							var answer = data[k].qAnswer.split("，");
							var answer_html = "";
							for(var i=0;i<answer.length;i++){
								answer_html += '<li><span class="choise-answer-'+i+'"'+'onclick="choise(this)">'+
								answer[i]+'</span></li>';
							}
							question_html = '<div id="question" class="question">&nbsp;&nbsp;<span class="title">'+
							'<img style="margin-top:-5px;" src="images/finger.png"/>&nbsp;&nbsp;&nbsp;第'+data[k].qOrder+'题：'+'</span>';
							question_html+=	'<span class="stem">'+data[k].qName+'</span><span class="hide">'+data[all].qOrder+'</span>';				
							question_html+= '<span>&#40</span>&nbsp;<span class="hide">'+data[k].qId+'</span><span id="user-answer-'+
							k+'"'+'></span><span>&#41</span>';
							question_html+= '<ul class="ul-question">';
							question_html+= answer_html;
							question_html+= '</ul></div>';
							document.getElementById("answer-question").innerHTML += question_html;
						}
					}
					});
				};
				
				
				
			/*
			 * 提交后跳转到结果页面
			 */
			var submitHttpUrl = IP+'submitAnswerAll';
        	var index_count = 0;
        	var user_answer_string = new Array();
        	var qid = new Array();
        	document.getElementById("submit_button").addEventListener("click",function(){
        		for(var k=0;k<document.getElementById("user-answer-0").previousSibling.previousSibling.previousSibling.previousSibling.innerText;k++){
        			user_answer_string[index_count] = document.getElementById("user-answer-"+k).innerText;
        			qid [index_count] = document.getElementById("user-answer-"+k).previousSibling.innerText;
        			index_count += 1;
        		}
        		var toTal = document.getElementById("user-answer-0").previousSibling.previousSibling.previousSibling.previousSibling.innerText;
        		
        		/*
				 *将用户回答后的成绩数据传向后台 
				 */
				mui.ajax(submitHttpUrl,{
					type:"post",
					dataType:"json",
					traditional:true,
					data :{
						uid:uId,
						tpid:tpID,
						total:toTal,
						uenswer:JSON.stringify(user_answer_string),
						qd:JSON.stringify(qid)
					},
					success:function(data){
						/*
		        		 * 跳转页面，并传值
		        		 * score是传的成绩
		        		 * tpID是为了，当在结果页面时，用户需要重新回答该试卷题，在结果页面的点击事件中将该值在回传回来，
		        		 * 确保回到相同的试卷
		        		 */  
		        		var dataNumber = parseFloat(data);
		        		var score = localStorage.setItem('score',dataNumber);
						mui.openWindow({
		        			url:'result.html',
		        			id:'result.html',
		        		});
        			}
				});
        	});
				</script>
				
				<!--
                	作者：offline
                	时间：2018-04-25
                	描述：编写用户点击答案，对话框获取选择的值
                -->
				<script>
					
//没有效果
//					mui("#question").on("tap","span",function(){
//						console.log(this.innerHTML);
//					});

					function choise(obj){
								obj.parentNode.parentNode.previousSibling.
								previousSibling.innerText=obj.innerText.split(":")[0];
					}
				</script>
		<!--
        	作者：offline
        	时间：2018-04-25
        	描述：尾部
        -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#index">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-help"></span>
				<span class="mui-tab-label">关于我们</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
	</body>
</html>